{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# RWTH Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are many ways of interactively using [IPython's widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import rwth_nb.plots.mpl_decorations as rwth_plots"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Interact\n",
    "\n",
    "The easiest way to get started using IPython’s widgets is [Interact](https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html#).   \n",
    "\n",
    "It offers simple widgets from top to bottom, without any design.   \n",
    "\n",
    "Also, it will show up on call."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define widgets\n",
    "slider = widgets.FloatSlider(min=-4, max=4, value=-2, step=.1, description='Slider', style=rwth_plots.wdgtl_style)\n",
    "checkbox = widgets.Checkbox(value=True, description='Checkbox', style=rwth_plots.wdgtl_style)\n",
    "\n",
    "# interact\n",
    "@widgets.interact(s=slider, c=checkbox)\n",
    "def update(s, c):\n",
    "    # do stuff with s and c here\n",
    "    pass"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Interactive\n",
    "\n",
    "With [interactive](https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html#interactive) more complex designs are possible. (see: [Styling](#Styling))\n",
    "\n",
    "Interactive returns a widget and does not display automatically."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# define widget on change function\n",
    "def update_signals(choose_A, opt1_A, opt2_A, choose_B, opt1_B, opt2_B):\n",
    "    # do stuff with parameters and call other functions possibly\n",
    "    pass\n",
    "\n",
    "# Widgets\n",
    "w_choose_A = widgets.Dropdown(options=['Option 1', 'Option 2', 'Option 3'], description=r'Choose A:', style=rwth_plots.wdgtl_style)\n",
    "w_opt1_A = widgets.FloatSlider(min=0.5, max=4, value=1, step=.1, description=r'A float slider 1', style=rwth_plots.wdgtl_style)\n",
    "w_opt2_A = s_t0=widgets.FloatSlider(min=-2, max=2, value=0, step=.1, description=r'A float slider 2', style=rwth_plots.wdgtl_style)\n",
    "w_choose_B = widgets.Dropdown(options=['Option 1', 'Option 2', 'Option 3'], description=r'Choose B:', style=rwth_plots.wdgtl_style)\n",
    "w_opt1_B = widgets.FloatSlider(min=0.5, max=4, value=1, step=.1, description=r'B float slider 1', style=rwth_plots.wdgtl_style)\n",
    "w_opt2_B = s_t0=widgets.FloatSlider(min=-2, max=2, value=0, step=.1, description=r'B float slider 2', style=rwth_plots.wdgtl_style)\n",
    "\n",
    "# interactive\n",
    "# on change: update_signals is called using widgets' values\n",
    "w = widgets.interactive(update_signals, choose_A=w_choose_A, opt1_A=w_opt1_A, opt2_A=w_opt2_A, choose_B=w_choose_B, opt1_B=w_opt1_B, opt2_B=w_opt2_B)\n",
    "\n",
    "# custom display using 2 vertical boxes and 1 horizontal box\n",
    "VBox_A = widgets.VBox((w_choose_A, w_opt1_A, w_opt2_A))\n",
    "VBox_B = widgets.VBox((w_choose_B, w_opt1_B, w_opt2_B), layout=widgets.Layout(margin='0 0 0 100px'))\n",
    "\n",
    "HBox_widget= widgets.HBox((VBox_A, VBox_B))\n",
    "\n",
    "# display\n",
    "display(HBox_widget);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Styling"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "RWTH widgets should always use `style=mpl_decorations.wdgtl_style` flag.  This sets the widget label style to full width."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = widgets.FloatSlider(min=0, max=3, value=1.5, step=.5, description='full description is readable', style=rwth_plots.wdgtl_style)\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### VBox/HBox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "words = ['A', 'B', 'C', 'D']\n",
    "items = [widgets.Button(description=w) for w in words]\n",
    "left_vbox = widgets.VBox([items[0], items[1]])\n",
    "right_vbox = widgets.VBox([items[2], items[3]])\n",
    "hbox = widgets.HBox([left_vbox, right_vbox])\n",
    "display(hbox)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For more styling options, see [Layout and Styling of Jupyter widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "This code is licensed under the [MIT license](https://opensource.org/licenses/MIT)."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}